Open topic with navigation

Open topic with navigation

Repeaters

To display data about numerous identical entities, use repeaters, which render a symbol once for each row in a source table, regardless of the length of the table.

The requirements for configuring a repeater are as follows:

• Group: The display container for the repeated symbols.
• Data source: A table with one row for each item you want to display in the containing group. The data source is typically defined in the dataflow for the container, by parsing files or dynamically incoming data.
• Symbol: A compound component that you want to display once for each row in the data source table. The symbol has parameters that the repeater populates with data from the data source table.

The basic workflow is as follows:

1. Create a group in which repeaters are to be displayed. In the group dataflow, define the logic required to provide the data source table.
2. In the group's Repeater properties, specify the symbol to be displayed and bind the repeater from the data source.
3. In the group's renderer (a child component that is added when you configure a repeater for the group), map data source columns to symbol properties.

When you define the symbol that you use for the repeater, you add parameters as placeholders for the data you want to display. For example, to display data about chemical elements, you might add parameters for symbol, name, atomic number and atomic weight, as shown in the following figure.

The following video describes the basics of repeaters.

Repeaters Example

This basic example uses repeaters to read data from a table of data about chemical elements and display one tile per element. The example uses a symbol composed of four text fields that are populated from a spreadsheet containing chemical element data. The symbol, in turn, populates the repeater property of a group. The following figure shows the resulting display.

For the data source, create a CSV file containing element data. Ensure that your input file has the required columns and some sample data, as shown below, save it as elements.csv, and add it to the project's assets folder.

Name, Symbol, Atomic_Number, Atomic_Weight
Hydrogen, H,1,1.00794
Helium, He,2,4.002602
Lithium, Li,3,6.941
Beryllium, Be,4,9.01218
Boron, B,5,10.811
Carbon, C,6,12.011
[...]
				

To recreate the example shown in the preceding figure, perform the following steps.

First, create the required logic:

1. On the stage, add a group component and set its Layout property to Horizontal.
2. Open the group component's dataflow and add the following blocks:
3. Add a string loader block, select it, and set its path to assets/elements.csv. To verify that it loads the file data correctly, click its Invoke button and check the data in its output field.
4. Add a CSV parser block and map the output of the string loader to its input. Select the CSV parser block and set withHeader to true.

The resulting dataflow is shown in the following figure.

To verify that the incoming data is parsed correctly, click its Table button and check the resulting output. To continue, close the group dataflow

Next, create the symbol:

1. In the Outline panel, select the Stage and add four text elements. Name them as follows:
   • esymbol
   • ename
   • enumber
   • eweight
2. Arrange and style the text elements as desired, then select them, group them, and convert them to a symbol named "element."
3. On the Outline panel, right-click the "element" symbol and choose Edit. An edit dialog is displayed.
4. From the top menu bar, choose Modify > Edit Properties. The Symbol Parameters dialog is displayed.
5. Add four string properties to the symbol by dragging string from the Panel list into the body of the dialog. Rename the properties by double-clicking them and typing the names shown below, then click OK to save your changes. The following figure shows the resulting parameters.



6. In the Outline pane, select each text element and bind the corresponding symbol property to it by dragging the blue dot from the Symbol Parameter dialog to the Text field, as shown in the following figure.



7. Click OK to save your changes. In the Outline panel, delete the group of text fields from which you created the "element" symbol.

Associate the data and the symbol with the group by configuring the group's Repeater properties as follows.

1. In the Outline panel, select the group and open its dataflow.
2. In the group’s Repeater properties, enter "element" in the Symbol field
3. In the dataflow pane, select the csvParserblock. Drag the blue dot from the dataflow output field to the Repeater Data field as shown in the following figure.



4. Close the dataflow.

Finally, bind the incoming data to the symbol properties as follows.

1. Display the group dataflow and select the csvParser block.
2. To display the incoming data, click the output Table… button.In the Outline panel, expand the group and click its “renderer” node. The symbol properties are displayed.
3. From the Table dialog, drag the Name, Symbol, Atomic_Number and Atomic_Weight column headings to the corresponding properties in the Properties dialog

This basic approach is very powerful, and you can go further by using the data from the symbol properties to modify other properties of the displayed data. For example, you can add logic to the dataflow to modify text color based on atomic number, to display radioactive element symbols in green text.

Return to Atrius Developer Portal Home Page